<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-button type="primary" @click="dialogFormVisible = true">新增脚本</el-button>
        <el-dialog title="新增脚本" :visible.sync="dialogFormVisible">
          <el-form :model="create_form">
            <el-form-item label="脚本名称" :label-width="formLabelWidth">
              <el-input v-model="create_form.scene_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="脚本数据" :label-width="formLabelWidth">
              <el-input  type="textarea"
                         :rows="25" v-model="create_form.script_data" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="create">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="15">

        <el-button type="primary" @click="examine">查询</el-button>
        <el-input v-model="execute_data.scene_name" placeholder="输入场景名称，根据场景名称查询到对应接口进行执行"></el-input>
        <el-button type="primary" @click="execute">执行脚本</el-button>

      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      border
      style="width: 100%; margin: 20px 0"
      max-height="900"
    >
      <el-table-column prop="create_time" label="创建日期" width="200"></el-table-column>
      <el-table-column prop="api_name" label="接口名称" width="200"></el-table-column>
      <el-table-column prop="asserts_expression" label="断言表达式" width="200"></el-table-column>
      <el-table-column prop="depend_api_name" label="依赖接口名字" width="200" ></el-table-column>
      <el-table-column prop="depend_replace" label="依赖表达式" width="200" :show-overflow-tooltip="true"></el-table-column >
      <el-table-column prop="is_depend" label="是否需要依赖" width="200"></el-table-column>
      <el-table-column prop="path" label="接口路径" width="200" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="request_method" label="请求方式" width="200"></el-table-column>
      <el-table-column prop="request_parameter" label="请求参数" width="200" :show-overflow-tooltip="true"></el-table-column>


    </el-table>
  </div>
</template>

<script>
  export default {
    name: "Config",
    methods: {
      handleEdit(index, row) {
        this.up_dialogFormVisible = true;
        console.log(index, row);
        this.update_form = row
      },
      cancel() {
        this.up_dialogFormVisible = false;
        this.refresh();
      },

      create() {
        try {
          this.create_form.script_data=JSON.parse(this.create_form.script_data);
        }
        catch (e) {
        }
        // this.create_form.script_data=JSON.parse(this.create_form.script_data);
        this.$xin.post(this.http + "/v1/apis/scene_script", this.create_form).then(res => {
          this.dialogFormVisible = false;
          if (res.request.status == 200) {
            this.$message({
              message: 'cg',
              type: 'success'
            });

          }
        }).catch(err => {
          this.$message.error(err.response);

        })
      },

      examine() {
        this.$xin.post(this.http + "/v1/apis/examine_script").then(res => {
          this.tableData = res.data;
          this.$message({
            message: '查询成功',
            type: 'success'
          });

        }).catch(err => {
          this.$message.error('参数错误');
        })
      },
      //脚本执行
      execute(){
        this.$xin.post(this.http + "/v1/apis/script_use",this.execute_data).then(res => {
          if(res.status==200){
            this.$message({
              message: '执行成功',
              type: 'success'
            });

          }
          this.execute_data={
            scene_name:''
          }
        }).catch(err => {
          this.$message.error('参数错误');
        })
      },
      //页面刷新
      refresh() {
        this.$xin.post(this.http + "/v1/apis/examine_script").then(res => {
          this.tableData = res.data;
        })
      }
    },

    data() {
      return {
        http: this.config.ip,
        tableData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        up_dialogTableVisible: false,
        up_dialogFormVisible: false,
        create_form: {
          scene_name: "",
          script_data: ""
        },
        formLabelWidth: '120px',
        execute_data:{
          scene_name:''
        }
      }

    },

    mounted() {
      this.refresh();
    }


  }
</script>

<style scoped>

</style>
